<template>
  <div>
    <el-card class="box-card">
      <p v-for="(type, index) in types" :key="index" :class="{active: item === type}" @click="selectItem(type)">
        <span>{{ type }}</span>
      </p>
    </el-card>
  </div>
</template>

<script>
import { types } from '@/assets/json/type'
import { EXERCISE_TYPE } from '@/constants/storage'
import axios from 'axios'
export default {
  data() {
    return {
      types: types,
      item: ''
    }
  },
  methods: {
    selectItem(value) {
      sessionStorage.setItem(EXERCISE_TYPE, value)
      this.item = value
      axios.post('/saveUserExamType', { examType: value })
      this.$router.back()
    }
  }
}
</script>

<style lang="scss" scoped>
  .box-card {
    width: 50%;
    margin: 0 auto;
    p {
      line-height: 48px;
      text-indent: 20px;
      cursor: pointer;
      transition: .6s;
      &:hover {
        color: #fff;
        background: #409EFF;
      }
    }
    .active {
      color: #fff;
      background: #409EFF;
    }
  }
</style>
